<template>
	<view class="container">
		<!-- 分段器 -->
		<view class="tab-container">
			<view v-for="(item,index) in tabList" class="tab-item" :class="{'active' : (curNow == index)}" @click="onTabItemClick(index)">
				{{item.name}}
			</view>
		</view>
		<!-- 填写反馈信息模块 -->
		<view class="detailsBox" v-show="curNow === 0">
			<view class="returnType">
				<u-radio-group v-model="value">
					<u-radio @change="radioChange" v-for="(item, index) in typeList" :key="index" :name="item.name" :disabled="item.disabled"
					 size=30>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="details-wrap">
				<textarea class="details" maxlength="600" fixed placeholder="请填写您的意见或者建议(字数600字以内)" v-model="detailsCount" @input="bindTextAreaInput"></textarea>
				<text class="detailsCount" style="color: #C0C4CC;position: absolute;right: 15px;">
					{{detailsCount.length}}/600
				</text>
			</view>
			<u-button type="success" :disabled="disabled" @click="submitButtonClick" :custom-style="customStyle">提交</u-button>
		</view>
		<!-- 反馈信息列表 -->
		<view class="returnsList" v-show="curNow === 1">
			<template v-for="item in taskList">
				<returnSubmit-item :submitDate="item.createTime" :status="item.status" :submitContent="item.content" @open="onReturnItemClick(item.id)"></returnSubmit-item>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		/* 下拉刷新 */
		onLoad: function(options) {
			this.pagination.current = 1
			this.$u.api.getReturnList(this.pagination.current, this.pagination.size).then(res => {
				console.log(res.data.list)
				this.taskList = []
				this.taskList = res.data.list
				// 是否有下一页
				this.pagination.hasNextPage = res.data.hasNextPage
			})
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('开始下拉刷新');
			// 默认获取第一页内容
			this.pagination.current = 1
			this.$u.api.getReturnList(this.pagination.current, this.pagination.size).then(res => {
				console.log(res.data.list)
				this.taskList = []
				this.taskList = res.data.list
				// 是否有下一页
				this.pagination.hasNextPage = res.data.hasNextPage
			})

		},
		onReachBottom() {
			console.log('开始上拉刷新')
			if (this.pagination.hasNextPage) {
				// 存在下一页
				this.status = 'loading'
				this.$u.api.getReturnList(++this.pagination.current, this.pagination.size).then(res => {
					for (let i in res.data.list) {
						this.taskList.push(res.data.list[i])
					}
					this.pagination.hasNextPage = res.data.hasNextPage
					this.status = 'loadmore'
				})
			} else {
				this.status = 'nomore'
			}
		},
		data() {
			return {
				tabList: [{
						name: '填写反馈'
					},
					{
						name: '我的反馈'
					}
				],
				typeList: [{
						name: '建议',
						disabled: false
					},
					{
						name: '故障',
						disabled: false
					},
					{
						name: '账号问题',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					}
				],

				value: '建议',
				type: 1,
				curNow: 0,
				detailsCount: '',
				disabled: true,
				customStyle: {
					position: 'fixed',
					bottom: 0,
					width: '100%',
					left: 0,
				},

				show: false,
				content: '加载中...',
				avatar: '',
				bannerList: [],
				noticeList: [],
				pagination: {
					current: 1,
					size: 5,
					hasNextPage: false
				},
				taskList: [],
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				refreshFlag: false,
			}
		},
		methods: {
			onTabItemClick(index) {
				this.curNow = index;
				if (index == 1) {
					// 当前点击的是我的反馈则重新载入列表
					// 修改 : 臧锡洋 2020年11月26日 21:26:23  V2
					this.pagination.current = 1
					this.$u.api.getReturnList(this.pagination.current, this.pagination.size).then(res => {
						console.log(res.data.list)
						this.taskList = []
						this.taskList = res.data.list
						// 是否有下一页
						this.pagination.hasNextPage = res.data.hasNextPage
					})
				}
			},
			onReturnItemClick(id) {
				console.log('被点击')
				uni.navigateTo({
					url: `/pages/functionPages/return-detail/return-detail?id=${id}`
				});
			},
			bindTextAreaInput: function(e) {
				if (e.detail.value.length != 0) {
					this.disabled = false;
				} else {
					this.disabled = true;
				}
			},
			//点击提交按钮
			submitButtonClick() {
				let param = {
					content: this.detailsCount,
					type: this.type,
				}
				this.$u.api.publishReturns(param).then(res => {
					console.log(res);
					//成功之后清空内容
					this.detailsCount = '';
					this.value = "建议";
					//TODO 提示信息
					//下单成功后提示并跳转
					uni.showToast({
						title: '反馈成功',
						success: function() {
							let time = setTimeout(function() {
								uni.navigateBack(1);
								clearTimeout(time)
							}, 1000)
						}
					})
				}, rej => {
					uni.showToast({
						title: '网络请求失败!',
						icon: 'none'
					});
					let time = setTimeout(function() {
						uni.navigateBack(1);
						clearTimeout(time)
					}, 1000)
				})

			},
			// 点击复选框，返回复选框的字符串
			radioChange(e) {
				switch (e) {
					case '建议':
						this.type = 1;
						break;
					case '故障':
						this.type = 2;
						break;
					case '账号问题':
						this.type = 3;
						break;
					case '其他':
						this.type = 4;
						break;
				}

			},

		}/* ,
		onHide: () => {
			// 页面隐藏时记录标识
			this.isShow = false;
		},
		onShow: () => {
			// 判断标识 强制刷新
			if (this.isShow == false) {
				// 强制更新数据
				// 默认获取第一页内容
				this.pagination.current = 1
				this.$u.api.getReturnList(this.pagination.current, this.pagination.size).then(res => {
					console.log(res.data.list)
					this.taskList = []
					this.taskList = res.data.list
					// 是否有下一页
					this.pagination.hasNextPage = res.data.hasNextPage
				})
				this.isShow = true
			}

		} */
	}
</script>

<style lang="scss">
	.container {
		.tab-container {
			background-color: #fff;
			height: 30px;
			line-height: 30px;
			display: flex;
			justify-content: space-evenly;

			.tab-item {
				text-align: center;
				position: relative;
				font-size: 16px;
				color: #9f9f9f;
				width: 50%;

				&.active {
					color: #2B85E4;
					font-weight: bold;
					border-top: 1px solid #2B85E4;
					background: rgb(238, 238, 238);
				}

			}
		}

		.detailsBox {
			width: 100%;
			height: 450rpx;
			margin: 10px auto 0;
			position: relative;
			background: #fff;
			padding: 5px 20px 0;

			.returnType {
				height: 25px;
				width: 100%;
				margin-bottom: 10px;
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding-left: 35px;
			}

			.details-wrap {
				.details {
					width: 95%;
					margin: 0 auto;
					background: rgb(250, 250, 250);
					height: 250rpx;
					font-size: 14px;
					border-radius: 8rpx;
					padding: 10px 10px 0;
				}
			}

			.submitButton {
				position: fixed;
				bottom: 0;
				background: #2B85E4;
				color: #fff;

			}
		}
	}
</style>
